<template>
  <div class="c flex-column" v-if="form">
    <div class="head">{{ t("退款成功") }}</div>
    <span class="head-desc"
      >{{ t("退款成功时间") }}：{{ form.refund_res.completetime_text }}</span
    >
    <el-divider></el-divider>
    <div class="refund-price">
      {{ t("退款总金额", { price: form.refund_res.price }) }}
    </div>
    <el-divider></el-divider>
    <div class="head">{{ t("协商历史") }}</div>
    <div class="user flex-row">
      <el-avatar size="large" :src="avatar"></el-avatar>
      <div class="info flex-column">
        <span class="name">MACASE</span>
        <!-- <span class="desc">平台同意用户退款说明</span> -->
      </div>
    </div>
    <div class="user flex-row">
      <el-avatar class="avatar" size="large" :src="userInfo.avatar"></el-avatar>
      <div class="info flex-column">
        <span class="name">{{ userInfo.nickname }}</span>
        <span class="desc">{{
          t("退款申请", { time: $util.timeChange(form.createtime) })
        }}</span>
        <div class="form flex-column">
          <span class="t1"
            >{{ t("退款类型") }}:<span class="t2">{{ "仅退款" }}</span></span
          >
          <span class="t1"
            >{{ t("退款金额") }}:<span class="t2"
              >{{ $t("公共.货币符号") }}{{ form.refund_res.price }}</span
            ></span
          >
          <span class="t1"
            >{{ t("退款原因") }}:<span class="t2">{{
              form.refund_res.refund_cause
            }}</span></span
          >
          <span class="t1"
            >{{ t("退款描述") }}:<span class="t2">{{
              form.refund_res.refund_content
            }}</span></span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    goods: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  data() {
    return {
      avatar: "https://placekitten.com/80/80?" + Math.random(),
      form: null,
    };
  },
  mounted() {
    if (this.goods) {
      this.form = this.$util.deepClone(this.goods);
    }
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     * @param {Object} opt 其他参数
     */
    t(v, opt) {
      if (opt) {
        return this.$t(`我的订单.${v}`, opt);
      }
      return this.$t(`我的订单.${v}`);
    },
  },
};
</script>
<style lang="less" scoped>
.c {
  .head {
    font-size: 20px;
    color: #333;
    font-weight: bold;
  }

  .head-desc {
    margin-top: 14px;
    color: #999;
    font-size: 16px;
  }

  .refund-price {
    color: #333;
    font-size: 16px;
    font-weight: 400;
  }

  .user {
    margin-top: 20px;
    align-items: flex-start;

    .info {
      flex: 1;
      margin-left: 10px;

      .name {
        color: #333;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
      }

      .desc {
        color: #999;
        font-size: 16px;
        font-weight: 400;
      }

      .form {
        justify-content: flex-start;
        align-items: flex-start;

        .t1 {
          margin-top: 20px;
          font-size: 16px;
          color: #333;
        }

        .t2 {
          margin-left: 14px;
        }
      }
    }
  }
}
</style>
